<template>
  <div>
    <Breadcrumb :items="['系统管理', '令牌管理']" />
    <a-card class="general-card" title="令牌管理">
      <template #extra>
        <a-space direction="horizontal" :size="18">
          <a-button type="primary" :loading="loading" @click="refresh()">
            <template #icon>
              <icon-refresh />
            </template>
            刷新
          </a-button>
        </a-space>
      </template>
      <!--分割线-->
      <a-divider direction="horizontal" />
        <a-row style="margin-bottom: 16px">
          <a-col :offset="16" :span="8" style="text-align: right">
            <a-space>
              <table-column-setting v-model:columns="columns" />
            </a-space>
            </a-col>
        </a-row>
      <a-table
        :columns="columns"
        :data="records"
        :loading="loading"
        row-key="id"
        :pagination="false">
        <template #number="{ record, rowIndex }">
            {{ rowIndex + 1 }}
        </template>
        <template #operation="{ record }">
           <a-popconfirm :content="`是否强制${record.accessToken}下线`" type="warning" @ok="forceOffline(record.accessToken)">
             <a-button type="text" size="small">
               强制下线
             </a-button>
           </a-popconfirm>
        </template>
        <template #footer>
          <a-pagination
            v-model:current="page.current"
            v-model:page-size="page.size"
            :total="page.total"
            size="small"
            :show-page-size="true"
            :show-total="true"
            :page-size-options="[10, 15, 20, 30, 50]"
            style="margin-top: 10px; float: right"
            @change="refresh"
            @page-size-change="refresh"
          />
        </template>
      </a-table>
    </a-card>
</div>
</template>

<script>
import useLoading from '@/hooks/loading'
import {listWithPagination, revokeToken} from '@/api/modules/auth/oauth'

const columns = [{
  title: '#',
  align: 'right',
  fixed: 'left',
  width: 50,
  slotName: 'number'
}, {
  title: "用户id",
  dataIndex: "id",
  hidden: true
}, {
  title: '用户名',
  dataIndex: 'username'
}, {
  title: '手机号',
  dataIndex: 'phone'
},{
  title: '客户端',
  dataIndex: 'clientId'
}, {
  title: '类型',
  dataIndex: 'type'
},{
  title: '令牌',
  dataIndex: 'accessToken'
},{
  title: '过期时间',
  dataIndex: 'expire'
},{
  title: "操作",
  width: 100,
  align: "right",
  fixed: "right",
  dataIndex: 'operation',
  slotName: 'operation'
}]

const { loading, setLoading } = useLoading();

export default {
  name: 'Token',
  data() {
    return {
      columns,
      loading,
      records: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    async refresh() {
      setLoading(true)
      const { data } = await listWithPagination(this.page)
      this.records = data.records
      const { current, size, total } = data
      this.page = {
        current,
        size,
        total
      }
      setLoading(false)
    },
    async forceOffline(accessToken) {
      await revokeToken(accessToken)
      await this.refresh()
    }
  }
}
</script>

<style scoped>

</style>
